Decorator Pattern

1 min read
Rapid overview

Decorator Pattern — Layer behavior

Decorators wrap an object or function to add behavior without changing the original.


Example (TypeScript)

type Handler = (input: string) => string;

const base: Handler = (input) => input.trim();

const withTelemetry = (handler: Handler): Handler => (input) => {
  const result = handler(input);
  console.log('handled', { input, result });
  return result;
};

withTelemetry(base)('  hello  ');

Why it matters

  • Adds cross-cutting behavior (logging, caching, retries).
  • Avoids deep inheritance chains.

Questions & Answers

Q: Where do decorators show up in frontend work?

A: Middleware chains, API client wrappers, React HOCs, and Angular interceptors.